<template>
    <div class="system-table-container layout-pd">
        <el-card shadow="hover" class="layout-padding-auto">
            <div class="system-table-search">
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-input class="mt10" size="default" v-model="state.tableData.param.actionId" placeholder="请输入关联ID" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.stepId" placeholder="请输入阶段步骤ID" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.checkUid" placeholder="请输入审批人ID" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.checkTime" placeholder="请输入审批时间" clearable @keyup.enter="handleQuery" />
                        <el-input class="mt10" size="default" v-model="state.tableData.param.deleteTime" placeholder="请输入删除时间" clearable @keyup.enter="handleQuery" />
                        <el-button size="default" class="mt10" type="primary" @click="handleQuery()" :icon="'ele-Search'"> 搜索 </el-button>
                        <el-button size="default" class="mt10" type="info" @click="resetQuery()" :icon="'ele-Refresh'"> 重置 </el-button>
                    </el-col>
                    <el-col :span="24">
                        <el-button size="default"
                                   class="mt10"
                                   type="success"
                                   :icon="'ele-Plus'"
                                   @click="handleAdd"
                                   v-auths="['leadmall:stepRecord:add']">新增</el-button>
                        <el-button class="mt10" size="default" type="primary" plain icon="ele-Edit" :disabled="single" @click="handleUpdate()" v-auths="['leadmall:stepRecord:edit']">修改</el-button>
                        <el-button size="default"
                                   class="mt10"
                                   type="danger"
                                   icon="ele-Delete"
                                   :disabled="multiple"
                                   @click="handleDelete()"
                                   v-auths="['leadmall:stepRecord:remove']">删除</el-button>
                        <el-button class="mt10" size="default" type="warning" plain icon="ele-Download" @click="handleExport" v-auths="['leadmall:stepRecord:export']">导出</el-button>
                    </el-col>
                </el-row>
            </div>

            <el-table border v-loading="state.tableData.loading" :data="state.tableData.data" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" align="center" />
                        <el-table-column show-overflow-tooltip label="" align="center" prop="id" v-if="true" min-width="180px"/>
                        <el-table-column show-overflow-tooltip label="关联ID" align="center" prop="actionId" min-width="180px"/>
                        <el-table-column show-overflow-tooltip label="阶段步骤ID" align="center" prop="stepId" min-width="180px"/>
                        <el-table-column show-overflow-tooltip label="审批人ID" align="center" prop="checkUid" min-width="180px"/>
                        <el-table-column show-overflow-tooltip label="审批时间" align="center" prop="checkTime" min-width="180px"/>
                        <el-table-column show-overflow-tooltip label="1审核通过2审核拒绝3撤销" align="center" prop="status" min-width="180px"/>
                        <el-table-column show-overflow-tooltip label="阶段类型:1项目" align="center" prop="type" min-width="180px"/>
                        <el-table-column show-overflow-tooltip label="审核意见" align="center" prop="content" min-width="180px"/>
                        <el-table-column show-overflow-tooltip label="删除时间" align="center" prop="deleteTime" min-width="180px"/>
                <el-table-column fixed="right" min-width="120px" label="操作" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-tooltip content="修改" placement="top">
                            <el-button link type="primary" icon="ele-Edit" @click="handleUpdate(scope.row)" v-auths="['leadmall:stepRecord:edit']"></el-button>
                        </el-tooltip>
                        <el-tooltip content="删除" placement="top">
                            <el-button link type="primary" icon="ele-Delete" @click="handleDelete(scope.row)" v-auths="['leadmall:stepRecord:remove']"></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty  :image-size="200"/>
                </template>
            </el-table>

            <el-pagination @size-change="onHandleSizeChange" @current-change="onHandleCurrentChange"
                           class="mt15 paginationFlex" :pager-count="5" :page-sizes="[10, 20, 30]"
                           v-model:current-page="state.tableData.param.pageNum" background
                           v-model:page-size="state.tableData.param.pageSize" layout="total, sizes, prev, pager, next, jumper"
                           :total="state.tableData.total">
            </el-pagination>
        </el-card>
        <!-- 添加或修改阶段步骤记录对话框 -->
        <StepRecordDialog ref="stepRecordDialogRef" @refresh="getList()" />
    </div>
</template>

<script setup name="StepRecord" lang="ts">
    import {reactive, onMounted, ref, defineAsyncComponent} from "vue";
    import { listStepRecord, delStepRecord} from '@/leadmall/api/stepRecord';
    import { StepRecordVO } from '@/leadmall/api/stepRecord/types';
    import { ElMessage, ElMessageBox,ElTable } from 'element-plus';
    import { download } from "@/api/config/utils/tool";
    // 引入组件
    const stepRecordDialogRef = defineAsyncComponent(() => import("./dialog.vue"));
    // 定义变量内容
    const multipleSelection = ref<StepRecordVO[]>([])
    const single = ref(true);
    const multiple = ref(true);
    const state = reactive({
        tableData: {
            data: [] as any,
            total: 0 as any,
            loading: false,
            dateRange: [] as any,
            param: {
                pageNum: 1,
                pageSize: 10,
            },
        }
    });
    /** 查询阶段步骤记录列表 */
    const getList = () => {
        state.tableData.loading = true;

        listStepRecord(state.tableData.param).then((res)=>{
            if (res.code === 200) {
                state.tableData.data = res.rows;
                state.tableData.total = res.total;
            } else {
                ElMessage.error(res.msg);
            }
        }).catch(() => {
            ElMessage.error('获取数据失败');
        }).finally(() => {
            state.tableData.loading = false;
        });
    }
    // 分页改变
    const onHandleSizeChange = (val: number) => {
        state.tableData.param.pageSize = val;
        getList();
    };
    // 分页改变
    const onHandleCurrentChange = (val: number) => {
        state.tableData.param.pageNum = val;
        getList();
    };
    /** 搜索按钮操作 */
    const handleQuery = () => {
        getList();
    }
    /** 重置按钮操作 */
    const resetQuery = () => {
        state.tableData.param = {
            pageNum: 1,
            pageSize: 10
        };
        handleQuery();
    }
    /** 多选框选中数据 */
    const handleSelectionChange = (selection: StepRecordVO[]) => {
        multipleSelection.value = selection
        single.value = selection.length != 1;
        multiple.value = !selection.length;
    }
    /** 新增按钮操作 */
    const handleAdd = () => {
        stepRecordDialogRef.value.openDialog("add", {});
    }
    /** 修改按钮操作 */
    const handleUpdate = (row?: StepRecordVO) => {
        stepRecordDialogRef.value.openDialog("edit", row);
    }
    /** 删除按钮操作 */
    const handleDelete = async (row?: StepRecordVO) => {
        const _ids = row?.id || multipleSelection.value.map((item) => item.id).join(',');
        if (_ids == "") {
            ElMessage.error("请选择要删除的数据");
            return;
        }
        state.tableData.loading= true
        ElMessageBox.confirm('是否确认删除APP信息编号为"' + _ids + '"的数据项？',
            '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(()=>{
            delStepRecord(_ids);
            ElMessage.success("删除成功");
        }).catch(() => {
            ElMessage.info('已取消删除');
        }).finally(() => {
            getList();
            state.tableData.loading= false
        });

    }
    /** 导出按钮操作 */
    const handleExport = () => {
        download('leadmall/stepRecord/export',
            { ...state.tableData.param },
            `stepRecord_${new Date().getTime()}.xlsx`)
    }
    onMounted(() => {
        getList();
    });
</script>
